<template>
  <div class="container">
    <!-- 搜索 -->
    <div
      class="news-header"
      :style="{
        backgroundImage: `url(${require('@/assets/newsbg.png')})`
      }"
    ></div>
    <div class="title">新闻资讯</div>
    <div class="sub-title">为您推荐公司及行业的前沿资讯，让您随时了解行业动态！</div>
    <div class="search">
      <el-popover placement="bottom" title="检索结果" width="50%" :visible="visible">
        <template #reference>
          <el-input v-model="searchText" class="w-50 m-2" placeholder="请输入新闻关键字" :prefix-icon="Search" type="search" size="large" @input="visible = true" @blur="visible = false" />
        </template>
        <div v-if="searchNewsList.length">
          <div v-for="data in searchNewsList" :key="data._id" class="search-item" @click="handleChangePage(data._id)">
            {{ data.title }}
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无新闻" :image-size="40" />
        </div>
      </el-popover>
    </div>

    <!-- 顶栏新闻 -->
    <div class="topnews">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in topNewsList" :key="item._id">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="handleChangePage(item._id)">
            <div
              class="image"
              :style="{
                backgroundImage: `url(http://localhost:3000${item.cover})`
              }"
            />
            <div style="padding: 14px">
              <span>{{ item.title }}</span>
              <div class="bottom">
                <time class="time">{{ whichTime(item.editTime) }}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 新闻选项卡 -->
    <el-tabs style="margin: 20px" v-model="whichTab" class="demo-tabs">
      <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.name" :key="item.name">
        <el-row :gutter="20">
          <el-col :span="18">
            <div v-for="data in tabNews[item.name]" :key="data._id" style="padding: 10px">
              <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="handleChangePage(data._id)">
                <div
                  class="tab-image"
                  :style="{
                    backgroundImage: `url(http://localhost:3000${data.cover})`
                  }"
                />
                <div style="padding: 14px; float: left">
                  <span>{{ data.title }}</span>
                  <div class="bottom">
                    <time class="tab-time">{{ whichTime(data.editTime) }}</time>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="6">
            <el-timeline>
              <el-timeline-item v-for="(data, index) in tabNews[item.name]" :key="index" :timestamp="whichTime(data.editTime)">
                {{ data.title }}
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- 回到顶部 -->
    <el-backtop :visibility-height="100" :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import axios from 'axios'
import moment from 'moment'
import _ from 'lodash'
import { ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
moment.locale('zh-cn')
const newsList = ref([])
// 检索框
const visible = ref(false)
onMounted(async () => {
  const res = await axios.get('/webapi/news/list')
  // console.log(res.data)
  newsList.value = res.data.data
  // console.log(_.groupBy(newsList.value, (item) => item.category))
})
// 搜索文本
const searchText = ref('')
// 搜索列表
const searchNewsList = computed(() => (searchText.value ? newsList.value.filter((item) => item.title.includes(searchText.value)) : []))

// 前四条数据
const topNewsList = computed(() => newsList.value.slice(0, 4))
const whichTime = (time) => {
  return moment(time).format('lll')
}

// 选项卡
const whichTab = ref(1)
const tabList = [
  {
    label: '最新动态',
    name: 1
  },
  {
    label: '典型案例',
    name: 2
  },
  {
    label: '通知公告',
    name: 3
  }
]
const tabNews = computed(() => _.groupBy(newsList.value, (item) => item.category))

// 跳转详情
const handleChangePage = (id) => {
  // console.log(id)
  router.push(`/news/${id}`)
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .news-header {
    width: 100%;
    height: 550px;
    background-size: cover;
  }
  .title {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 60px;
    font-weight: 600;
    color: #fff;
  }
  .sub-title {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 750px;
    font-size: 28px;
    color: #fff;
  }
  .search {
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
  }
}

.search-item {
  height: 40px;
  line-height: 40px;
  &:hover {
    background-color: whitesmoke;
  }
}

.topnews {
  margin: 20px;
  .image {
    width: 100%;
    height: 150px;
    background-size: cover;
  }
  .time {
    font-size: 13px;
    color: gray;
  }
}

.tab-image {
  width: 150px;
  height: 100px;
  background-size: cover;
  float: left;
}
.tab-time {
  font-size: 13px;
  color: gray;
}
</style>
